<template>
  <div class="container">
    <div class="header">
      <div class="header-logos">
        <img class="header-image" src="../assets/hupu-logo.png" alt="">
        <img class="header-image" src="../assets/honi.png" alt="">
        <img class="header-image" src="../assets/rog.png" alt="">
      </div>
      <h2>第二届虎扑JRs杯csgo联赛小组赛抽签</h2>
    </div>
    <div class="content">
      <div class="content-select">
        <el-select
          v-model="input"
          placeholder="选择队伍"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="danger" size="small" style="margin-left: 20px;" :loading="loading" @click="handleClick">抽签</el-button>
      </div>
      <div class="content-draw">
        <div
          class="box"
          v-for="(item, index) in items"
          :key="index"
          :ref="(el) => {
              if (el) divs[index] = el;
            }"
        >
          {{ item }}
        </div>
      </div>
      <div class="content-table">
        <el-table :data="tableData" stripe size="mini">
          <el-table-column prop="name" label="队名" />
          <el-table-column prop="number" label="签号" />
        </el-table>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import { ref, onBeforeUpdate } from "vue";
export default {
  name: "Draw",
  setup() {
    // 生成展示抽签的小方块
    const setItems = (num) => {
      let itemsList = []
      for (let i = 0; i < num; i++) {
        itemsList.push(i + 1)
      }
      return itemsList
    }
    let items = setItems(8);
    // 队名在这里
    let options = ref([
      {
        value: "DGYT",
        label: "DGYT",
      },
      {
        value: "HUPUNOOBS",
        label: "HUPUNOOBS",
      },
      {
        value: "Team Unknown",
        label: "Team Unknown",
      },
      {
        value: "JMG",
        label: "JMG",
      },
      {
        value: "TOP ZERO",
        label: "TOP ZERO",
      },
      {
        value: "啊对对队",
        label: "啊对对队",
      },
      {
        value: "How2play",
        label: "How2play",
      },
      {
        value: "花开又富贵",
        label: "花开又富贵",
      }
    ]);
    // 对应的签号在这里
    const list = {
      1: 'A1',
      2: 'A2',
      3: 'A3',
      4: 'A4',
      5: 'B1',
      6: 'B2',
      7: 'B3',
      8: 'B4',
    }
    let input = ref("");
    const loading = ref(false);
    const tableData = ref([]);
    const divs = ref([]);
    // 确保在每次更新之前重置ref
    onBeforeUpdate(() => {
      divs.value = [];
    });
    const handleClick = () => {
      loading.value = true;
      let random = 0;
      // 需要特殊时间比赛的队伍
      if (input.value === "DGYT") {
        const scope = [1, 2, 3, 4]
        random = scope[Math.floor(Math.random() * 8)];
      } else {
        random = Math.floor(Math.random() * 8 + 1);
      }
      if (items.includes(random)) {
        const show_load = setInterval(() => {
          let machine_index = Math.floor(Math.random() * 8);
          for (let i = 0; i < divs.value.length; i++) {
            divs.value[i].classList.remove("red");
          }
          divs.value[machine_index].classList.add("red");
        }, 100);
        setTimeout(() => {
          clearInterval(show_load);
          for (let i = 0; i < divs.value.length; i++) {
            divs.value[i].classList.remove("red");
          }
          divs.value[random - 1].classList.add("red");
          tableData.value.push({
            name: input.value.concat(""),
            number: list[random],
          });
          let newItems = [...items];
          items = newItems.filter((item) => {
            return item !== random;
          });
          let newOptions = [...options.value];
          options.value = newOptions.filter((item) => {
            return item.value !== input.value;
          });
          input.value = "";
          loading.value = false;
        }, 1000);
      } else {
        if (items.length !== 0) {
          handleClick();
        }
      }
    };
    return { items, handleClick, tableData, input, divs, options, loading };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;

  &-logos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 15%;
  }

  &-image {
    width: 20%;
    height: 15%;
  }

  h2 {
    margin: 0;
  }
}
.content {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start;

  &-select {
    width: 100%;
    margin: 20px 0;
  }

  &-draw {
    width: 320px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    margin-bottom: 20px;
    
    .box {
      position: relative;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-weight: 500;
      color: rgb(65, 62, 62);
      font-size: 32px;
    }

    .box::after {
      content: "";
      background: url(../assets/hupu-icon.png) no-repeat;
      background-size: 100% 100%;
      opacity: 0.65;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;   
    }

    .box.red {
      background: rgb(255, 240, 240);
    }
  }

  &-table {
    width: 320px;
  }
}
.footer {
  width: 100%;
}
</style>